<template>
  <div id="app">
    <router-view name="views" />
    <router-view name="search" />
    <router-view name="video" />
    <!-- 歌词页面 -->
    <transition name="popup">
      <router-view name="lyric"></router-view>
    </transition>
    <!-- 播放音乐bar -->
    <playMusicBar />
    <!-- 底部导航栏 -->
    <van-tabbar
      v-model="active"
      active-color="#fe6673"
      inactive-color="#a2e1d4"
      @change="onChangeTabbar"
    >
      <van-tabbar-item>
        <span>首页</span>
        <template #icon>
          <span class="bobafont bobamusic-index-select"></span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>视频</span>
        <template #icon>
          <span class="bobafont bobamusic-shipin"></span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="3">
        <span>消息</span>
        <template #icon>
          <span class="bobafont bobamusic-xiaoxi1"></span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon>
          <span class="bobafont bobamusic-wode"></span>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
const playMusicBar = () => import("components/common/PlayMusicBar.vue");

export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onChangeTabbar(active) {
      // 切换路由
      switch (active) {
        case 0:
          this.$router.push("/index");
          break;
        case 1:
          this.$router.push("/video");
          break;
        case 2:
          this.$router.push("/message");
          break;
        case 3:
          this.$router.push("/profile");
          break;
        default:
          return;
      }
    },
  },
  mounted() {

  },
  computed: {
    // 用于监听currentView的变化
    currentView() {
      return this.$store.state.currentView;
    },
    // 监听加载状态，在加载期间用户不可以操作
    loadingState() {
      return this.$store.state.loading;
    },
  },
  watch: {
    active(newV, oldV) {
      console.log(newV);
    },
    currentView(newV, oldV) {
      console.log("监听到了值" + newV);
      this.active = newV;
    },
    loadingState(newV, oldV) {
      if (newV) {
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          duration: 0,
        });
      } else {
        this.$toast.success("加载完成");
        setTimeout(() => {
          this.$router.push("lyricView");
        }, 1000);
      }
    },
  },
  components: {
    playMusicBar,
  },
};
</script>

<style>
.tabbarActiveChecked {
  color: blue;
}
.tabbarActiveUnchecked {
  color: #ccc;
}
/* 给tapbar添加阴影 */
.van-hairline--top-bottom {
  /* box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
}

/* 歌词页面的切换的动画 */
.popup-enter,
.popup-leave-to {
  transform: translateY(100%);
}
.popup-enter-to,
.popup-leave {
  transform: translateY(0);
}
.popup-enter-active,
.popup-leave-active {
  transition: all 0.3s ease;
}
</style>
